<!-- 回收订单 -->
<template>
	<view class="recycleOlder">
		<view class="topBox flex_sb">
			<view class="topItem" :class="{'topItemActive':status == item.v}" v-for="(item,index) in tagList" :key="index"
				@click="tagChange(item.v)">
				{{item.name}}
			</view>
		</view>

		<view class="card mt_120" v-for="(sa,idx) in dataList" :key="idx">
			<view class="head border_bm flex_sb">
				<view class="left flex_j flex_1">
					<view class="statusBox" v-if="sa.order_type==1">定价回收</view>
					<view class="statusBox blue" v-else>来料待结</view>
					<view class="olderTxt flex_1">订单号：{{sa.order_sn}}</view>
					
				</view>
				<view class="statuTxt" v-if="sa.status == 0">待审核</view>
				<view class="statuTxt" v-else-if="sa.status == 3">邮寄中</view>
				<view class="statuTxt" v-else-if="sa.status == 5">待确认</view>
				<view class="statuTxt" v-else-if="sa.status == 6">已完成</view>
				<view class="statuTxt" v-else-if="sa.status == 2">已取消</view>
			</view>

			<view class="flex_sb border_bm">
				<view class="Title">
					{{ ['','黄金','白银','铂金','钯金'][sa.type] }} 
					<text class="grey" v-if="sa.status == 5 || sa.status == 6">实际克重{{sa.actual_weight}}g</text>
					<text class="grey" v-else>预计克重{{sa.weight}}g</text>
				</view>
				<view class="goldPrice" v-if="sa.recycle_price != 0">金价{{sa.recycle_price}}g</view>
			</view>
			<view class="flex_sb floorBox">
				<view class="text" v-if="sa.status == 4 && sa.countdown > 0" style="color: #D43030;display: flex;font-size: 24rpx;">
				<!-- <view class="text" v-if="sa.status == 4" style="color: #D43030;display: flex;font-size: 24rpx;"> -->
					<countDown
					tipText=" " 
					hourText=":" 
					minuteText=":" 
					secondText=" "
					 :isDay="false"
					:datatime="sa.countdown"
					@complete="countDownComplete"
					colors="#D43030"></countDown>后自动取消订单，定金不退还
				</view>
				<view v-else class="infoGrey" :style="{color: sa.status == 2 ? 'red' : '#737373'}">{{sa.msg || sa.remark}}</view>
				<view class="confirmBtn flex_c" v-if="sa.status != 5" @tap="$util.JumpPath(`/pages/new_gold/recycleOlder/olderDetail?id=${sa.order_sn}&type=${sa.order_type}`)">查看订单</view>
				<view class="confirmBtn flex_c" v-else @tap="$util.JumpPath(`/pages/new_gold/recycleOlder/olderDetail?id=${sa.order_sn}&type=${sa.order_type}`)">{{sa.order_type==1?'确认金额':'确认克重'}}</view>
			</view>
		</view>
		
		<view class="notTips">
			没有更多数据了！
		</view>

	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/new_store.js'
	import countDown from '@/components/countDown/index.vue'
	export default {
		components: {countDown},
		data() {
			return {
				tagList: [
					{name: '全部', v: 7}, 
					{name: '待审核', v: 0}, 
					{name: '邮寄中', v: 3}, 
					{name: '待确认', v: 5}, 
					{name: '已完成', v: 6}, 
					{name: '已取消', v: 2}, 
				],
				page:1,
				limit:10,
				finish: false,
				status:7,
				dataList: [],
			}
		},
		onLoad(options) {
			this.status = options.status || 7
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.finish = false
			this.getOrderListFnc()
		},
		onReachBottom() {
			if(!this.finish) {
				this.page ++
				this.getOrderListFnc()
			}
		},
		onReachBottomDistance: 100,
		methods: {
			countDownComplete() {
				this._resetData &&clearTimeout(this._resetData)
				this._resetData = setTimeout(()=>{
					this.dataList = []
					this.page = 1
					this.finish = false
					this.getOrderListFnc()
				}, 1000)
			},
			tagChange(v) {
				this.status = v
				this.dataList = []
				this.page = 1
				this.finish = false
				this.getOrderListFnc()
			},
			getOrderListFnc() {
				let that = this
				let data = {
					'page': that.page,
					'limit': that.limit,
					'status': that.status
				}
				getOrderList(data).then(res => {
					if (res.status != 200) return
					let arr = res.data.list
					if(arr.length < that.limit) {
						this.finish = true
					}
					that.dataList.push(...arr)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recycleOlder {
		position: relative;
		width: 100%;
		height: 100%;
		background: #F8F8FA;
		overflow-y: scroll;
		padding-top: 120rpx;
		padding-bottom: 200rpx;
	}

	.topBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 36rpx;

		.topItem {
			height: 100rpx;
			position: relative;
			font-size: 32rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}

		.topItemActive {
			font-size: 32rpx;
			font-weight: 550;
			color: rgba(189, 145, 83, 1);
		}

		.topItemActive::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
			background: #BD9153;
		}
	}

	.mt_120 {
		margin-top: 120rpx;
	}

	.card {
		width: 702rpx;
		height: 269rpx;
		background: #FFFFFF;
		margin: 0 auto 12rpx;
		padding: 0 28rpx;

		.head {
			height: 83rpx;
			line-height: 83rpx;

			.statusBox {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 132rpx;
				height: 40rpx;
				color: #FFF;
				font-size: 24rpx;
				line-height: 28rpx;
				background: #F46334;
				border-radius: 6rpx;

			}

			.blue {
				background: #2A82E4;
			}

			.olderTxt {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(115, 115, 115, 1);
				text-align: left;
				margin-left: 20rpx;
			}

			.statuTxt {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(189, 145, 83, 1);
				text-align: right;

			}
		}

		.Title {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			// line-height: 43.44rpx;
			color: rgba(48, 48, 48, 1);
			text-align: left;

			.grey {
				margin-left: 52rpx;
				color: rgba(102, 102, 117, 1);
			}
		}

		.goldPrice {
			font-size: 30rpx;
			text-align: right;
			color: rgba(255, 141, 26, 1);
		}

	}

	.floorBox {
		height: 90rpx;

		.infoGrey {
			font-size: 24rpx;
			line-height: 34.75rpx;
			color: rgba(115, 115, 115, 1);
			text-align: left;
		}

		.confirmBtn {
			width: 148rpx;
			height: 59rpx;
			font-size: 28rpx;
			background: #C3A769;
			color: rgba(255, 255, 255, 1);
			border-radius: 6rpx;
		}
	}
	.notTips {
		font-size: 24rpx;
		line-height: 34.75rpx;
		text-align: center;
		color: rgba(115, 115, 115, 1);
		margin: 100rpx auto 100rpx;
	}
	
	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}
</style>